<template>
	<view class="content">
		<view class="content-card">
			<view class="btn" v-if="$store.state.user.roles">
				<u-button type="primary" @click="handleAdd('emulate','观摩课')">添加观摩课</u-button>
			</view>
			<view class="card-list" v-for="item in data">
				<view class="card-title">{{item.activity_name}}</view>
				<view class="card-body">
					<view class="body-text">活动时间：{{item.begin_time}}</view>
					<view class="body-text">活动地址：{{item.activity_add}}</view>
				</view>
				<view class="iconfont icon-weikaishi icon" v-if="item.state === 0"></view>
				<view class="iconfont icon-jinhangzhong icon" v-if="item.state === 1"></view>
				<view class="iconfont icon-yiwancheng icon" v-if="item.state === 2"></view>
				<view class="card-foot">
					<u-button type="primary" @click="handleClick(item)">活动详情</u-button>
					<u-button v-if="item.state === 2" type="primary" @click="reportClick(item)">活动报告</u-button>
					<u-button type="primary" v-if="item.state === 1"
						@click="getEmulateSignStatusData(item)">签到/签退</u-button>
					<u-button type="primary" v-if=" $store.state.user.roles && item.state ===1"
						@click="openSignout(item)">开启签退</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEmulate,
		publicClassOut,
		getEmulateSignStatus,
		saveEmulateLectureActivitySignIn
	} from '@/api/home'
	export default {
		data() {
			return {
				data: [],
				location: "",
				latitude: 0,
				longitude: 0
			}
		},
		created() {
			this.getEmulateData();
			this.getLocation();
		},
		methods: {
			// 开启签退
			openSignout(data) {
				publicClassOut({
					activityId: data.id
				}).then(() => {
					uni.$u.toast("已开启签退");
				})
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: true,
					success: (res) => {
						this.latitude = res.latitude
						this.longitude = res.longitude
						let address = res.address;
						this.location = address.district + address.street + address.poiName;
					}
				})
			},
			getEmulateSignStatusData(data) {
				if (this.location === '') {
					uni.$u.toast("未开启定位，请重新设置");
					return;
				}
				getEmulateSignStatus({
					activityId: data.id,
					deviceId: this.$store.state.user.deviceId
				}).then(res => {
					console.log(res)
					if (res.signStatus === 0) {
						saveEmulateLectureActivitySignIn({
							activityId: data.id,
							deviceId: this.$store.state.user.deviceId,
							sign_adress: this.location,
							latitude: this.latitude,
							longitude: this.longitude
						}).then(result => {
							console.log(result)
							if (result.status === 0) {
								uni.$u.toast("签到成功");
							} else {
								uni.$u.toast(result.result);
							}

						})
					} else if (res.signStatus === 1) {
						saveEmulateLectureActivitySignIn({
							activityId: data.id,
							deviceId: this.$store.state.user.deviceId,
							sign_adress: this.location,
							latitude: this.latitude,
							longitude: this.longitude
						}).then(result => {
							console.log(result)
							uni.$u.toast("签退成功");
						})
					} else if (res.signStatus === 2) {
						uni.$u.toast("已签到");
					} else if (res.signStatus === 3) {
						uni.$u.toast("已签退");
					}
				})
			},
			//获取观摩课数据
			getEmulateData() {
				getEmulate({
					deviceId: this.$store.state.user.deviceId
				}).then(res => {
					this.data = res.list;
				})
			},
			handleAdd(type, title) {
				this.$tab.navigateTo(`/pages/home/add/index?type=` + type + '&title=' + title)
			},
			//活动详情
			handleClick(data) {
				this.$tab.navigateTo(`/pages/activity/index?id=` + data.id + '&type=emulate')
			},
			reportClick(data) {
				this.$tab.navigateTo(`/pages/activity/report?id=` + data.id + '&type=emulate')
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.content-card {
			padding: 0 15px;

			.btn {
				margin-top: 10px;
			}

			.card-list {
				background: #fff;
				border-radius: 10px;
				margin-top: 15px;
				padding: 10px 15px;
				position: relative;

				.card-title {
					font-size: 25px;
					color: #999;
					border-bottom: 1px solid #eee;
					padding-bottom: 15px;
				}

				.card-body {
					padding: 15px 0;
					border-bottom: 1px solid #eee;
					margin-bottom: 10px;

					.body-text {
						font-size: 14px;
						color: #666;
						margin: 5px;
					}
				}

				.card-foot {
					display: flex;
					justify-content: space-between;

					.u-button {
						margin: 0 5px;
					}
				}

				.iconfont {
					position: absolute;
					top: 5px;
					right: 20px;
					font-size: 80px;
				}

				.icon-jinhangzhong {
					color: #3c96f3;
				}

				.icon-weikaishi {
					color: #999;
				}

				.icon-yiwancheng {
					color: #666;
				}
			}
		}
	}
</style>